<template lang="pug">
  .redpacket-detail-base
    .detail-bg
      .text 红包详情
    img.detail-avatar(:src="detail_info.pic")
    .detail-base
      .title {{detail_info.nickname}}
      .desc {{detail_info.desc}}
      .money {{detail_info.self.number}}
      router-link.link(:to="{name: 'Profile'}") 【已存入零钱，可直接提现】
    ul.detail-list
      li(v-for="record in detail_info.records", :key="record.nickname")
        .avatar
          img(:src="record.avatar")
        .info
          .left
            .name @{{record.nickname}}
            .time {{record.created_at}}
          .amount {{record.number}}
</template>

<script>
import UserInfo from './helpers/user_info'

export default {
  name: 'RedPacketDetail',
  data () {
    return {
      detail_info: {
        self: {
          avatar: ''
        },
        records: []
      }
    }
  },
  methods: {
    getDetail () {
      this.$http.post('/proxy/api/red_envlopes', {red_envlope_id: this.$route.query.red_envlope_id, access_token: this.user_info.access_token}).then((res) => {
        this.detail_info = res.data
      })
    }
  },
  created () {
    this.getDetail()
  },
  computed: {
    user_info () {
      return UserInfo.get()
    }
  }
}
</script>
<style lang="sass">
@import './styles/color.sass';
.redpacket-detail-base
  overflow-x: hidden
  background: $gray-bg
  .detail-bg
    margin-left: -5%
    width: 110%
    height: 120px
    background: #d95940
    border-radius: 0px 0px 80% 80%
    padding: 10px 10% 60px 10%
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    margin-bottom: 30px
    a
      font-size: .9em
      display: block
      color: $yellow
      text-decoration: none
      width: 80px
      img
        height: .9em
    .text
      flex: 1 1
      color: $yellow
      text-align: center
    .space
      width: 80px

  img.detail-avatar
    position: absolute
    left: 50%
    margin-left: -30px
    top: 85px
    width: 60px
    height: 60px
    border-radius: 50%

  .detail-base
    text-align: center
    padding: 10px
    .title
      padding: 5px 0px
    .desc
      font-size: .9em
      color: $gray
    .money
      padding: 15px 0px
      font-size: 2em
    .link
      color: $link
      text-decoration: none
  ul.detail-list
    list-style: none
    margin: 0px
    padding: 10px
    background: $white
    li
      display: flex
      flex-direction: row
      justify-content: space-between
      align-items: stretch
      border-bottom: $gray-bg 1px solid
      .avatar
        width: 50px
        height: 50px
        padding: 5px 5px 5px 0px
        img
          width: 40px
          height: 40px
      .info
        flex: 1 1
        display: flex
        flex-direction: row
        justify-content: space-between
        padding: 5px 0px
        align-items: stretch
        .amount
          width: 80px
          text-align: right
        .left
          flex: 1 1
          display: flex
          flex-direction: column
          justify-content: space-between
          align-items: flex-start
          .name
            font-size: .9em
          .time
            color: $light-gray
            font-size: .7em
</style>
